<template>
  <div class="plan-order">
    <MenuView></MenuView>
    <el-header><LogoView></LogoView></el-header>
    <plan-order-menu
        :departure="departure"
        :destination="destination"
    />
    <div class="content-wrapper">
      <div class="ad-space">广告位</div>
      <plan-order-main
          :departure="departure"
          :destination="destination"
      />
      <div class="ad-space">广告位</div>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import {useRoute} from 'vue-router';
import PlanOrderMenu from './planOrderMenu.vue';
import PlanOrderMain from './planOrderMain.vue';
import MenuView from "@/views/index/menu.vue";
import LogoView from "@/views/index/logo.vue";

const route = useRoute();
const departure = ref(route.query.cfcity || '');
const destination = ref(route.query.ddcity || '');
</script>

<style lang="scss" scoped>
.plan-order {
  display: flex;
  flex-direction: column;
  align-items: center; // 居中对齐

  .content-wrapper {
    display: flex;
    width: 100%;
    max-width: 1200px; // 最大宽度
    padding: 0 20px; // 左右留出空隙
  }

  .ad-space {
    flex: 1;
    max-width: 200px; // 广告宽度
    background-color: #f0f0f0;
    margin: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  plan-order-main {
    flex: 3;
    margin: 0 20px;
    max-width: 800px; // 内容区域最大宽度
  }
}
</style>
